import React,{useEffect, useState,useRef} from 'react'
import { CapsuleTabs ,SpinLoading} from 'antd-mobile'
import { useScroll } from 'ahooks'
import { Wrapper } from './style'
import { connect } from 'react-redux'
import { rootState } from '@/store'
import {Link} from 'react-router-dom'
import {
  getTabRankLike,
} from '@/store/actionCreators'
import Lazyload from 'react-lazyload'

interface RankProps {
  rankLike:any[],
  getTabRankLike: () => void;
}
const Rank :React.FC<RankProps>= (props) => {
  const {
    rankLike,
  } = props
  const {
    getTabRankLike,
  } = props
 
  useEffect(() => {
    if(rankLike.length==0)
    getTabRankLike();
  }, [])
  return (
      <Wrapper>
        <CapsuleTabs defaultActiveKey='1'>
          {
            rankLike.map(data =>
              <CapsuleTabs.Tab title={data.title} key={data.key}>
                { data.key%3!==0 ? 
                  data.content.map((item:any,index:number) =>
                    <div className="ranklike_list" key={index}>
                      {
                        (index+1)%2!==0 &&
                        <div className="item-left">
                         <Link 
                          to="detail" 
                          state={{
                            video:item.videoUrl
                          }}>
                          {/* <Lazyload height={210} once> */}
                          <img className="left" src={item.picUrl}/>
                          {/* </Lazyload> */}
                         </Link>
                          <div className="topic-title">
                            {item.title}
                            <div className="like-bottom">
                              <img className="like-icon" src={item.userLogo}/>
                              <div className='topic-user-name'>{item.userNick}</div>
                              <div className="like-num-container">
                                <img src="https://gw.alicdn.com/tfs/TB1l_0.b3gP7K4jSZFqXXamhVXa-45-45.png_110x10000.jpg_.webp"/>
                                <div className='like-num'>{item.like}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      }
                      {
                        (index+1)%2==0 &&
                         <div className="item-right">
                          <Link to = {`detailpic/${index}`}
                            state={{
                              id:index,
                              pic:item.picUrl,
                              pos:item.pos
                            }}>
                             {/* <LazyLoad height={150} once> */}
                             <img className="right" src={item.picUrl}/>
                            {/* </LazyLoad> */}
                          </Link>
                            <div className="topic-title">
                              {item.title}
                              <div className="like-bottom">
                                <p className='like-title'>{item.brightPoints}</p>
                                <span className="like-labels">{item.promotionDOList}</span>
                                <div className="like-price">
                                  <span className="price">￥{item.soldRecent}</span>
                                  <span className='num'>{item.dynamicsInfo}</span>
                                </div>
                                <span className='item-subTags'>{item.subTags}</span>
                              </div>
                            </div>
                           
                         </div>
                      }
                     
                    </div>
                    ):
                    data.content.map((item:any,index:number) => {
                      return (
                      <div className="ranklike_list" key={index}>
                        {
                          (index+1)%2!==0 &&
                          <div className="item-left">
                            <Link to = {`detailpic/${index}`}
                               state={{
                                pic:item.picUrl,
                                pos:item.pos
                              }}>
                               {/* <Lazyload height={210}
                                placeholder={<SpinLoading  color='primary'/>}>  */}
                               <img className="left" src={item.picUrl}/>
                                {/* </Lazyload> */}
                            </Link>
                            <div className="topic-title">
                                {item.title}
                                <div className="like-bottom">
                                  <p className='like-title'>{item.brightPoints}</p>
                                    { item.promotionDOList &&
                                    <span className="like-labels">{item.promotionDOList}</span>
                                    }
                                  <div className="like-price">
                                    <span className="price">￥{item.soldRecent}</span>
                                    <span className='num'>{item.dynamicsInfo}</span>
                                  </div>
                                  <span className='item-subTags-left'>{item.subTags}</span>
                                </div>
                              </div>
                          </div>
                        }
                        {
                          (index+1)%2==0 &&
                           <div className="item-right">
                              <Link to = {`detailpic/${index}`}
                                 state={{
                                  pic:item.picUrl,
                                  pos:item.pos
                                }}>
                                {/* <LazyLoad height={150}> */}
                                <img className="right" src={item.picUrl}/>
                              {/* </LazyLoad> */}
                              </Link>
                              <div className="topic-title">
                                {item.title}
                                <div className="like-bottom">
                                  <p className='like-title'>{item.brightPoints}</p>
                                  { item.promotionDOList &&
                                    <span className="like-labels">{item.promotionDOList}</span>
                                    }
                                  <div className="like-price">
                                    <span className="price">￥{item.soldRecent}</span>
                                    <span className='num'>{item.dynamicsInfo}</span>
                                  </div>
                                  <span className='item-subTags'>{item.subTags}</span>
                                </div>
                              </div>
                             
                           </div>
                        }
                       
                      </div>
                      )
                    })
                }
              </CapsuleTabs.Tab>
              )
          }
        </CapsuleTabs>
      </Wrapper>
  )
}
export default connect(
  (state :rootState) => ({
    rankLike:state.home.rankLike,
  }),
  {
    getTabRankLike,
  }
)(Rank)